import React from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { SubNavMenu, SubNavItem, SubNavSubItem } from 'components/navListMenv'
import { Header, Image } from 'semantic-ui-react'

const OrgNav = ({ activeItem, link, project }) => (
  <SubNavMenu vertical tabular>
    <SubNavItem className="subnav top">
      <Header as="h2">
        <Image src="https://img.icons8.com/office/2x/user-group-man-man.png" />
      </Header>
    </SubNavItem>
    <SubNavItem className="subnav section" name="" />
    <SubNavSubItem
      className={activeItem === 'member' ? 'subactive' : ''}
      onClick={() => link(`/project/${project.orgName}/${project.projectName}/user/member`)}
    >
      <a>
        <span>项目成员</span>
      </a>
    </SubNavSubItem>
    <SubNavSubItem
      className={activeItem === 'team' ? 'subactive' : ''}
      onClick={() => link(`/project/${project.orgName}/${project.projectName}/user/team`)}
    >
      <a>
        <span>组织成员</span>
      </a>
    </SubNavSubItem>
  </SubNavMenu>
)

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(OrgNav)
